<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>产品充值卡模板管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		#productList{
			float:right;width:78%;height:300px;border:1px solid #cccccc;display:block;
			overflow: auto;border-radius:0;
		}
		#productList li a{
			border-color:#f3f3f3;
			background:#fff;
			color:#000;
		}
	</style>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				rules:{
	                "retail_price": "ifMoney",
	                "discount": {
	                	"range" :[1, 100]
	                }
	            },
				submitHandler: function(form){
					var lists = $("#productList li");
					var ids = "";
					for(var i =0; i < lists.length; i++) {
						var item = lists[i];
						ids += item.id + ",";
					}
					if (ids && ids != '') {
						$("#productIds").val(ids);
						loading('正在提交，请稍等...');
						form.submit();
					} else {
						showTip("产品不能为空！");
					}
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			$("#productList").delegate(".delete", "click", function(){
        		var item = $(this).parent();
        		item.remove();
	 		});
			$("#retail_price").change(function(){
				$("#real_cost").val($(this).val());
			});
			addParentPageNo();
		});
		function addParentPageNo() {
			var id = '${storeCardTemplateProduct.id}';
			var pageNo = 1;
			if(id != "" && sessionStorage.parentPageNo) {
				pageNo = sessionStorage.parentPageNo;
			}
			$("#pageNo").val(pageNo);
			var href = "${ctx}/base/storeCardTemplateProduct/?pageNo=" +pageNo + "&currentSelectId=" +id;
			$("#return").attr("href", href);
		}
		function selectPtoductType(){
			var val = $("input[name='productType']:checked").val();
			$("#productTypeSelection").popup("close");
			addProduct(0, val);
		}
		function addProduct(type, productType){
			var url = '${ctx}/base/storeProduct/storeProductData?type=' + type + '&productType=' + productType;
			var extIds = "";
			var lists = $("#productList li");
			for(var i =0; i < lists.length; i++) {
				var item = lists[i];
				extIds += item.id + ",";
			}
			global.addMultSelectList(url, "选择产品", extIds, "productList");
		}
	</script>
</head>
<body>
	<form:form id="inputForm" class="form-input"  modelAttribute="storeCardTemplateProduct" action="${ctx}/base/storeCardTemplateProduct/save" method="post">
		<form:hidden path="id"/>
		<input type="hidden" id="pageNo" name="pageNo" />
		<input id="productIds" name="productIds" type="hidden" value=""/>
		<div class="icon-buttons">
			<a id="return" data-role="button" data-inline="true" data-icon="back" data-iconpos="notext"  href="">返回</a>
			<input type="submit" value="保 存" data-icon="check" data-iconpos="notext"  data-inline="true"/>
		</div>
		<tags:message content="${message}"/>
		<div data-role="fieldcontain">
   			<label for="name">卡名:</label>
    		<form:input path="name" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="product">使用产品:</label>
			<div>
				<a href="#productTypeSelection" data-rel="popup" data-icon="plus" data-inline="true" data-position-to="window" data-transition="pop" data-role="button">添加系统产品</a>
				<input type="button" value="添加店面产品" data-inline="true" data-icon="plus" onclick="addProduct(1,0)">
			</div>
			<ul id="productList" data-role="listview" data-inset="true"  data-split-icon="delete" data-split-theme="a">
				<c:forEach var="map" items="${productMap}">
					<li id='${map.key}'><a>${map.value}</a><a class="delete"></a></li>
		 		</c:forEach>
			</ul>
		</div>
		<div data-role="fieldcontain">
			<label for="retail_price">零售价（元）:</label>
			<form:input path="retail_price" htmlEscape="false" maxlength="10" class="required"/>
		</div>
		<div data-role="fieldcontain">
			<label for="discount">购买产品折扣（%）:</label>
			<input type="number" id="discount" value="${fns:changeDisCount(storeCardTemplateProduct.discount)}" name="discount" class="required digits"/>
		</div>
		<div data-role="fieldcontain">
			<label for="real_cost">开卡优惠价（元）:</label>
			<form:input path="real_cost" htmlEscape="false" maxlength="50" class="required"/>
		</div>
	</form:form>
	<div data-role="popup" id="productTypeSelection"
		data-overlay-theme="a" data-theme="c" data-dismissible="false"
		class="ui-corner-all">

		<div data-role="header" data-theme="a" class="ui-corner-top">
			<h1>温馨提示</h1>
		</div>
		<div data-role="content" style="width:15em; height: 11em"
			data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">请选择产品类别:</h3>
			<input type="radio" name="productType" id="type0" value="0" checked="checked" />
			<label for="type0">${fns:getDictLabel("0", "product_sell_type", "")}</label>
			<input type="radio" name="productType" id="type1" value="1" />
			<label for="type1">${fns:getDictLabel("1", "product_sell_type", "")}</label>
			<input type="radio" name="productType" id="type2" value="2" />
			<label for="type2">${fns:getDictLabel("2", "product_sell_type", "")}</label>
		</div>
		<div data-theme="a" data-role="footer">
			<fieldset data-role="controlgroup" data-type="horizontal"
				data-inline="true">
				<button data-inline="true"
					onclick="selectPtoductType()">确定</button>
				<button type="reset" data-inline="true"
					onclick="$('#productTypeSelection').popup('close');"
					data-theme="a">取消</button>
			</fieldset>
		</div>
	</div>
</body>
</html>
